<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发布公告</title>
    <script src="../../static/js/axios-0.18.0.js"></script>
    <script src="../../static/plugins/echarts/echarts.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!--引入样式-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
        }
        .avatar {
            width: 100px;
            height: 100px;
            display: block;
        }
    </style>
</head>
<body>
<div id="app">
    <el-form ref="newsform" :model="newsform" :rules="rules" label-position="right" label-width="100px">
        <el-row>
            <el-form-item label="标题" prop="newstitle">
                <el-input
                        type="text"
                        placeholder="请输入标题"
                        v-model="newsform.newstitle"
                        maxlength="20"
                        show-word-limit
                >
                </el-input>
            </el-form-item>
        </el-row>
        <el-row>
            <el-form-item label="公告简介" prop="newsdesc">
                <el-input
                        type="textarea"
                        placeholder="请输入内容"
                        :autosize="{minRows:5,maxRows:10}"
                        v-model="newsform.newsdesc"
                        maxlength="50"
                        show-word-limit
                >
                </el-input>
            </el-form-item>
        </el-row>
        <el-row>
            <el-form-item label="公告内容" prop="newscontent">
                <el-input
                        type="textarea"
                        placeholder="请输入内容"
                        :autosize="{minRows:9,maxRows:20}"
                        v-model="newsform.newscontent"
                        maxlength="300"
                        show-word-limit
                >
                </el-input>
            </el-form-item>
        </el-row>
        <el-row>
            <el-form-item label="公告图" prop="image">
                <el-upload
                        class="avatar-uploader"
                        action="/news/upload"
                        :auto-upload="autoUpload"
                        name="imgFile"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    <div slot="tip" class="el-upload__tip">只能上传jpg文件，且不超过2048kb</div>
                </el-upload>
            </el-form-item>
        </el-row>
        <el-row>
            <el-button type="success" @click="submit">提交</el-button>
        </el-row>
    </el-form>
</div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            autoUpload:true,
            imageUrl:null,
            newsform: {},
            fileList:[],
            rules: {
                newstitle:[{required:true,message:'标题为必填项',trigger:'blur'},
                    {min:3,max:10,message:'标题长度在3-20个字符',trigger:'blur'}],
                newsdesc:[{required:true,message:'公告简介为必填项',trigger:'blur'}],
                newscontent:[{required:true,message:'公告内容',trigger:'blur'},
                    {min:20,max:300,message:'内容长度在20-300个字符',trigger:'blur'}],
                image:[{required:true,message:'必须上传图片'}]
            },
        },
        methods: {
            //文件上传成功后的钩子，response为服务端返回的值，file为当前上传的文件封装成的js对象
            handleAvatarSuccess(response, file) {
                this.imageUrl = response.data;
                this.$message({
                    type:response.flag ? 'success' : 'error',
                    message:response.message
                })
                //设置form表单中的img数据，为后来提交到数据库做准备
                this.newsform.image=response.data;
            },
            //上传图片之前执行
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传套餐图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传套餐图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            //提交
            submit(){
                this.$refs['newsform'].validate((valid)=>{
                    if(valid){
                        axios.post("/news/submit",this.newsform).then((res)=>{
                            if(res.data.flag){
                                this.$message.success("添加公告成功");
                                this.resetForm();
                            }else{
                                this.$message.error("提交出错");
                            }
                        }).catch(()=>{
                            this.$message.error("提交出错");
                        })
                    }else{
                        //请检查表单
                        this.$message.error("请检查");
                    }
                })
            },
            // 重置表单
            resetForm() {
                this.newsform={};
                this.imageUrl = null;
            },
        }
    })
</script>
</html>